<template>
  <!--    <img :src="src" class="img-box" @click="preview">-->

  <div v-if="showPreview" class="preview-box">
    <div class="remove-btn" @click="showPreview = false">×</div>
    <div class="preview-img-box">
      <div :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }" class="preview-img">
        <img :src="myProps.src" style="width: 100%;height: 100%;"/>
        <div v-show="props.showBox === '1'" class="j" v-for="item in jArray"
             :style="{ width: item.width + 'px', height: item.height + 'px', left: item.x + 'px', top: item.y + 'px' }">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref, toRefs} from 'vue'
import {toReactive} from "@vueuse/core";
const props =defineProps({
  showBox:{
    type: String,
    default: function(){
      return "1"
    }
  }
})
// const props = defineProps({
//   src: {
//     type: String,
//     default: function () {
//       return ""
//     }
//   },
//   location: {
//     type: String,
//     default: function () {
//       return ""
//     }
//   },
//   width: {
//     type: [Number]
//   },
//   height: {
//     type: [Number]
//   }
// })

const myProps = ref({
  width:0,
  height: 0,
  location:"",
  src:""
})

const showPreview = ref(false)
const canvasFinish = ref(false)
const boxWidth = ref()
const boxHeight = ref()
const jArray = ref<any>([])

const preview = () => {
  console.log(myProps.value)
  jArray.value = []

  const imgWidth: number = myProps.value.width as number;
  const imgHeight: number = myProps.value.height as number;
  const ableWidth: number = window.outerWidth * 0.8;
  const ableHeight: number = window.outerHeight * 0.8;
  let rate = ableWidth / imgWidth;
  const rateHeight = ableHeight / imgHeight;
  if (rate > rateHeight) {
    rate = rateHeight
  }

  boxWidth.value = imgWidth * rate;
  boxHeight.value = imgHeight * rate;
  let lArr;
  if(props.showBox === '1'){
     lArr = JSON.parse(myProps.value.location as any);
  }else{
    lArr=[0,0]
  }
  lArr.forEach((element: any) => {
    let x: number = element.xmin;
    let y: number = element.ymin;
    let width: number = element.xmax - element.xmin;
    let height: number = element.ymax - element.ymin;
    x = x * rate;
    y = y * rate;
    width = width * rate;
    height = height * rate;
    jArray.value.push({
      x,
      y,
      width,
      height
    })
    console.log(jArray.value)
  });
  showPreview.value = true;
}
const show = (item:any) => {

  myProps.value.width = item.imgWidth;
  myProps.value.height = item.imageHeight;
  myProps.value.src = item.picUrl;
  myProps.value.location = item.imgLocation;
  preview();
}
defineExpose({
  show
})
</script>
<style scoped>
.img-box {
  /* width: 100%; */
  width: 200px;
  object-fit: contain;
  cursor: pointer;
}

.preview-box {
  position: fixed;
  width: 100vw;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  z-index: 99999;
  background: rgba(0,0,0,.8);
}

.remove-btn {
  right: 40px;
  top: 20px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: #3333;
  color: #fff;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 40px;
}

.preview-box .preview-img-box {
  height: 100vh;
  overflow-y: scroll;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 10vh;
}

.preview-box .preview-img-box .preview-img {
  position: relative;
}

.preview-box .preview-img-box .preview-img .j {
  z-index: 9999999;
  position: absolute;
  border: 2px solid red;
}

.preview-box .preview-img-box .preview-img .canvas {
  width: 100%;
  height: 100%;
  left: 0;
  height: 0;

}
</style>
